<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center enterpriseDetails_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub enterpriseDetails_fd0_0'>
          <view class='flex flex-wrap align-center enterpriseDetails_fd0_0_c0' @tap.stop="handleJumpDiy"
            data-type="back" data-url="1">
            <text class='fu-iconfont2  enterpriseDetails_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='enterpriseDetails_fd0_0_c1_c0'>企业详情</text>
          </view>
          <view class='flex flex-wrap align-center justify-end enterpriseDetails_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <view class='flex flex-direction flex-wrap align-stretch justify-between enterpriseDetails_fd1_0'>
          <view class='flex flex-wrap align-stretch flex-sub'>
            <image class='enterpriseDetails_fd1_0_c0_c0' mode="aspectFill" @tap.stop="singleImagePreview(info.logo)"
              :src='info.logo'></image>
            <view class='flex flex-direction flex-wrap align-stretch self-start flex-sub enterpriseDetails_fd1_0_c0_c1'>
              <view class='flex flex-wrap align-end'>
                <text class='enterpriseDetails_fd1_0_c0_c1_c0_c0'>{{info.mingcheng}}</text>
              </view>
              <view class='flex flex-wrap align-center enterpriseDetails_fd1_0_c0_c1_c1'>
                <view class='text-cut enterpriseDetails_fd1_0_c0_c1_c1_c0' v-for="(item,index) in info.serviceList"
                  :key="index">
                  {{item.name}}
                </view>
              </view>
            </view>
            <image class='enterpriseDetails_fd1_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"172.png"'
              @click.stop="goMap"></image>
          </view>
          <text class='enterpriseDetails_fd1_0_c1'>企业地址：{{info.address}}</text>
          <view class='flex align-center enterpriseDetails_fd1_0_c1' @click.stop="goPhone">
            企业电话：{{info.qiyedianhua || '暂无企业电话'}}
            <image class='iocn' mode="aspectFit" :src='STATIC_URL+"196.png"'></image>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <view>
          <benben-flex-tabs class-name='enterpriseDetails_benbenTabsfd2_0' v-model="cateId" ref="benben_tabsfd2_0"
            select-mark="benben_tabsfd2_0" key="benben_tabsfd2_0" :open-title-type='false' :open-sticky='false' :top='0'
            :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd2_0">

            <scroll-view @scroll="tabsInfofd2_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd2_0"
              class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left.sync="tabsInfofd2_0.moveX"
              scroll-with-animation="all .3s ease">
              <view class="benben-tabs-content" id="benben_tabsfd2_0-content">
                <view id="benben_tabsfd2_0-title" class="benben-tabs-title flex flex align-center justify-around">
                  <view :class="{ 'checkTitlefd2_0': cateId == '1', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '1'" :id="`benben_tabsfd2_0-title-item-${'1'}`">

                    <text>企业介绍</text>

                  </view>
                  <view :class="{ 'checkTitlefd2_0': cateId == '2', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '2'" :id="`benben_tabsfd2_0-title-item-${'2'}`">

                    <text>业务范围</text>

                  </view>
                  <view :class="{ 'checkTitlefd2_0': cateId == '3', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '3'" :id="`benben_tabsfd2_0-title-item-${'3'}`">

                    <text>产品展示</text>

                  </view>
                  <view :class="{ 'checkTitlefd2_0': cateId == '4', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '4'" :id="`benben_tabsfd2_0-title-item-${'4'}`">

                    <text>员工列表</text>

                  </view>
                </view>
                <view :style="{ left: tabsInfofd2_0.lineleft, maxWidth: tabsInfofd2_0.lineWidth ,}"
                  id="benben_tabsfd2_0-line"
                  class="benben-tabs-line flex benben-flex-tabs-line enterpriseDetails_linefd2_0"></view>
              </view>
            </scroll-view>

          </benben-flex-tabs>

        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout enterpriseDetails_flex_3">
        <view class='flex flex-direction flex-wrap align-stretch enterpriseDetails_fd3_0' v-if=" cateId=='1'">
          <text class='enterpriseDetails_fd3_0_c0'>{{info.jieshao}}</text>
          <image v-for="(item,index) in info.images" class='enterpriseDetails_fd3_0_c1' mode="aspectFill" :src='item'
            @tap.stop="multiImagePreview(item,info.images,'')">
          </image>
          <fu-empty-ui v-if="info.jieshao=='' &&info.images.length==0"></fu-empty-ui>
        </view>
        <view class='clearfix enterpriseDetails_fd3_1' v-if=" cateId=='2'">
          <view class='float_left flex align-center justify-center enterpriseDetails_fd3_1_c0'
            v-for="(item,index) in info.serviceList">
            <text>{{item.name}}</text>
          </view>
          <!-- <fu-empty-ui v-if="info.serviceList.length==0"></fu-empty-ui> -->
        </view>
        <view class='flex flex-direction flex-wrap align-stretch' v-if=" cateId=='3'">
          <view class='flex flex-wrap align-center enterpriseDetails_fd3_2_c0' v-for="(item,index) in info.productList"
            @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/homePage/enterpriseDetails/projectDetail?aid=${item.aid}`">
            <image class='enterpriseDetails_fd3_2_c0_c0' mode="aspectFill" :src='item.thumb'></image>
            <view>
              <view class=" text-lg">{{item.chanpinmingcheng}}</view>
              <view class="text-999 text-sm text-cut margin-top-sm" style="width: 450rpx;">{{item.jieshao}}</view>
            </view>

          </view>
          <fu-empty-ui v-if="info.productList.length==0"></fu-empty-ui>
        </view>
        <view class="flex benben-flex-layout flex-wrap align-center" v-if=" cateId=='4'">
          <view class='flex flex-wrap align-start justify-between enterpriseDetails_fd4_0' @tap.stop="handleJumpDiy"
            v-for="(item,index) in dataMessage" data-type="navigateTo"
            :data-url="`/pages/grzx/userHome/userHome?aid=${item.id}`">
            <view class='flex flex-wrap align-start flex-sub'>
              <image class='enterpriseDetails_fd4_0_c0_c0' mode="aspectFill" :src='item.avatar'></image>
              <view class='flex flex-direction flex-wrap align-stretch flex-sub enterpriseDetails_fd4_0_c0_c1'>
                <view class='flex flex-wrap align-end'>
                  <text class='enterpriseDetails_fd4_0_c0_c1_c0_c0'>{{item.nickname}}</text>
                  <text class='enterpriseDetails_fd4_0_c0_c1_c0_c1'
                    v-if="item.user_group_name">{{item.user_group_name}}</text>
                </view>
                <view class='flex flex-wrap align-center'>
                  <text class='enterpriseDetails_fd4_0_c0_c1_c1_c0'>{{item.zhiye}}</text>
                </view>
                <view class='flex flex-wrap align-center'>
                  <view class='text-cut enterpriseDetails_fd4_0_c0_c1_c2_c0' v-if="indexC<9"
                    v-for="(itemC,indexC) in item.freeindustryattributes_name" :key="indexC">{{itemC}}</view>
                </view>
              </view>
            </view>
            <view class='flex flex-wrap align-center' @click.stop="collect(item)">
              <!-- <text class='dongDetail_fd1_0_c1_c0_c1_c0'>{{dataDetails.is_follow==0 ? '+关注' : '已关注'}}</text> -->
              <text>{{item.is_follow==0 ? '+关注' : '已关注'}}</text>
            </view>
          </view>
          <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
            :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
        </view>
      </view>
      <benben-popup v-model="popupShow1717403550224" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
        <!---删除弹窗flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center userHome_flex_4">
          <text class='userHome_fd4_0'>提示</text>
          <text class='userHome_fd4_1'>默认{{info.coin}}个币激活</text>
          <view class='flex flex-wrap align-center userHome_fd4_2'>
            <button class='userHome_fd4_2_c0' @click.stop="popupShow1717403550224=false">取消</button>
            <button class='userHome_fd4_2_c1' @click.stop="goPay">确认</button>
          </view>
        </view>

        <!---删除弹窗flex布局结束-->

      </benben-popup>


    </view>
  </page-body>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        popupShow1717403550224: false,
        "tabsInfofd2_0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "cateId": "1",
        aid: '',
        info: '',
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "dataMessage": [],
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      this.aid = options.aid
      this.getDetail()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      async goPay() {
        this.$api.post(global.apiUrls.post667e55aef29d7, {
          company_id: this.aid
        }).then(res => {
          this.popupShow1717403550224 = false
          if (res.data.code == 1) {
            this.getDetail()
            this.callMobile(this.info.qiyedianhua);
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      goPhone() {
        let that = this
        if (!that.info.qiyedianhua) {
          return;
        }
        if (that.info.is_show == 1) {
          uni.makePhoneCall({
            phoneNumber: that.info.qiyedianhua_text
          })
        } else {
          that.popupShow1717403550224 = true
        }
        // if (that.info.is_show == 1 {
        //     uni.makePhoneCall({
        //       phoneNumber: that.info.qiyedianhua
        //     })
        //   } else {

        //   }
      },
      collect(item) {
        this.$api.post(global.apiUrls.post66505b8b64564, {
          user_id: item.id
        }).then(res => {
          this.$message.info(res.data.msg)
          if (res.data.code == 1) {
            if (item.is_follow == 1) {
              item.is_follow = 0
            } else {
              item.is_follow = 1
            }
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      goMap() {
        if (!this.info.lat) {
          this.$message.info('该企业信息位置无效')
          return;
        }
        uni.openLocation({
          latitude: parseFloat(this.info.lat),
          longitude: parseFloat(this.info.lng),
          name: this.info.mingcheng,
          success: function() {
            console.log('success');
          }
        });
      },
      getDetail() {
        this.$api.post(global.apiUrls.post6651b7b41cace, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.info = res.data.data
            this.getList()
          }
        })
      },
      getList() {
        this.minixPagingListsApi = global.apiUrls.post6651b71c80939;
        this.pageingListApiMethod = 'get';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          company_id: this.aid
        }
        this.listData = [];
        this.dataMessage = this.listData;
        console.log('llll', this.dataMessage)
        this.pagingListToggle();


      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  };
</script>
<style lang="scss" scoped>
  .userHome_flex_4 {
    background: #fff;
    width: 540rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .userHome_fd4_0 {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 32rpx;
    color: #333333;
    margin: 40rpx 0rpx 40rpx 0rpx;
  }

  .userHome_fd4_1 {
    line-height: 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .userHome_fd4_2_c1 {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
    font-size: 32rpx;
    color: rgba(94, 202, 113, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .userHome_fd4_2_c0 {
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .userHome_fd4_2 {
    margin: 37rpx 0rpx 0rpx 0rpx;
  }

  .iocn {
    width: 40rpx;
    height: 40rpx;
    margin-left: 16rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: var(--benbenbgColor1);
    background-size: 100% auto;
  }

  .enterpriseDetails_flex_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .enterpriseDetails_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .enterpriseDetails_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .enterpriseDetails_fd0_0_c0 {
    width: 120rpx;
  }

  .enterpriseDetails_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .enterpriseDetails_fd1_0_c1 {
    color: var(--benbenFontColor2);
    padding: 24rpx 0rpx 0rpx 0rpx;
    font-size: 28rpx;
  }

  .enterpriseDetails_fd1_0_c0_c2 {
    width: 35rpx;
    height: 35rpx;
  }

  .enterpriseDetails_fd1_0_c0_c1_c1_c0 {
    border: 1px solid #ED914A;
    background: #FFFFFF;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    color: var(--benbenFontColor6);
    font-size: 22rpx;
    padding: 6rpx 10rpx 6rpx 10rpx;
    margin: 0rpx 12rpx 12rpx 0rpx;
    width: 120rpx;
    text-align: center;
  }

  .enterpriseDetails_fd1_0_c0_c1_c1 {
    margin: 12rpx 0rpx 0rpx 0rpx;
  }

  .enterpriseDetails_fd1_0_c0_c1_c0_c0 {
    font-size: 30rpx;
    font-weight: 600;
  }

  .enterpriseDetails_fd1_0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .enterpriseDetails_fd1_0_c0_c0 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 16rpx;
  }

  .enterpriseDetails_fd1_0 {
    border-bottom: 1px solid #eee;
    background: #FFFFFF;
    margin: 24rpx auto 0rpx auto;
    width: 686rpx;
    padding: 24rpx;
  }

  .enterpriseDetails_linefd2_0 {
    background: rgba(94, 202, 113, 1);
    width: 50rpx;
    height: 8rpx;
    top: 80rpx;
    background-size: 100% auto !important;
    border-radius: 16rpx;
  }

  .checkTitlefd2_0 {
    font-weight: 700 !important;
    font-size: 28rpx !important;
    color: #333 !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  ::v-deep .enterpriseDetails_benbenTabsfd2_0 {
    background: #fff;
    width: 750rpx;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
    color: var(--benbenFontColor2);
    font-size: 32rpx;
  }

  .enterpriseDetails_flex_3 {
    background: rgba(246, 247, 249, 1);
    background-size: 100% auto;
    height: 100vh;
  }

  .enterpriseDetails_fd3_2_c0_c0 {
    width: 140rpx;
    height: 110rpx;
    border-radius: 16rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .enterpriseDetails_fd3_2_c0 {
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    width: 686rpx;
    height: 140rpx;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.06);
    margin: 24rpx auto 0rpx auto;
    padding: 0rpx 16rpx 0rpx 16rpx;
  }

  .enterpriseDetails_fd3_1_c0 {
    background: #FFFFFF;
    color: #333;
    font-size: 24rpx;
    width: 150rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    height: 98rpx;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.06);
    padding: 0rpx 12rpx 0rpx 12rpx;
    text-align: center;
    margin: 16rpx 16rpx 0rpx 0rpx;
  }

  .enterpriseDetails_fd3_1 {
    background: rgba(246, 247, 249, 1);
    width: 686rpx;
    margin: 0rpx auto 0rpx auto;
    background-size: 100% auto;
    height: 100vh;
  }

  .enterpriseDetails_fd3_0_c1 {
    width: 686rpx;
    height: 272rpx;
    border-radius: 16rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .enterpriseDetails_fd3_0_c0 {
    color: rgba(119, 119, 119, 1);
  }

  .enterpriseDetails_fd3_0 {
    width: 702rpx;
    margin: 24rpx auto 24rpx auto;
    height: 100vh;
  }

  .enterpriseDetails_fd4_0_c0_c1_c2_c0 {
    border: 1px solid #ED914A;
    background: #FFFFFF;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    color: var(--benbenFontColor6);
    font-size: 22rpx;
    padding: 6rpx 10rpx 6rpx 10rpx;
    margin: 0rpx 12rpx 12rpx 0rpx;
    width: 120rpx;
    text-align: center;
  }

  .enterpriseDetails_fd4_0_c0_c1_c1_c0 {
    font-size: 24rpx;
    color: rgba(170, 170, 170, 1);
    margin: 8rpx 0rpx 8rpx 0rpx;
  }

  .enterpriseDetails_fd4_0_c0_c1_c0_c1 {
    background: var(--benbenbgColor2);
    color: var(--benbenFontColor3);
    font-size: 22rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
    border-radius: 4rpx;
    background-size: 100% auto;
    padding: 4rpx 4rpx 4rpx 4rpx;
  }

  .enterpriseDetails_fd4_0_c0_c1_c0_c0 {
    font-size: 30rpx;
    font-weight: 600;
  }

  .enterpriseDetails_fd4_0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .enterpriseDetails_fd4_0_c0_c0 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 16rpx;
  }

  .enterpriseDetails_fd4_0 {
    background: #FFFFFF;
    margin: 24rpx auto 0rpx auto;
    width: 686rpx;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.08);
    padding: 24rpx;
  }
</style>
